<%@ page isELIgnored="true" language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>--%>
<%@page import="admin.Connectmysql" %>
>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员操作界面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        accent: '#722ED1',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        success: '#00B42A',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .sidebar-icon {
                @apply relative flex items-center justify-center h-10 w-10 mt-2 mb-2 mx-auto
                bg-gray-800 hover:bg-primary hover:text-white
                rounded-3xl hover:rounded-xl
                transition-all duration-300 ease-linear
                cursor-pointer shadow-lg;
            }

            .sidebar-tooltip {
                @apply absolute w-auto p-2 m-2 min-w-max left-14 rounded-md shadow-md
                text-white bg-gray-900
                text-xs font-bold
                transition-all duration-100 scale-0 origin-left;
            }

            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }

            .btn-secondary {
                @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }

            .btn-danger {
                @apply bg-danger hover:bg-danger/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }

            .btn-warning {
                @apply bg-warning hover:bg-warning/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }

            .btn-success {
                @apply bg-success hover:bg-success/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }

            .card {
                @apply bg-white rounded-xl shadow-md p-5 transition-all duration-300 hover:shadow-lg;
            }

            .input-field {
                @apply w-full px-4 py-2 mt-2 mb-4 text-gray-700 bg-white border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 outline-none;
            }

            .table-row {
                @apply transition-all duration-200 hover:bg-gray-50;
            }

            .badge {
                @apply px-2 py-1 text-xs rounded-full font-medium;
            }
        }
    </style>
</head>
<body class="bg-gray-100 font-inter antialiased text-gray-800">
<div class="flex h-screen overflow-hidden">
    <!-- 侧边栏导航 -->
    <div class="hidden md:flex md:flex-col md:w-64 md:fixed md:inset-y-0 bg-dark border-r border-gray-800 z-30 transition-all duration-300 ease-in-out"
         id="sidebar">
        <!-- 管理员信息 -->
        <div class="flex items-center justify-center h-16 border-b border-gray-800">
            <div class="flex items-center">
                <div class="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
                    <i class="fa fa-user-circle text-white text-xl"></i>
                </div>
                <div class="ml-3">
                    <p class="text-white font-semibold">管理员</p>
                    <p class="text-gray-400 text-xs">系统管理员</p>
                </div>
            </div>
        </div>

        <!-- 导航菜单 -->
        <nav class="flex-1 overflow-y-auto py-4 px-3">
            <div class="space-y-1">
                <a href="#dashboard"
                   class="flex items-center px-3 py-2 text-sm font-medium rounded-lg bg-primary/10 text-primary group">
                    <i class="fa fa-tachometer w-5 h-5 mr-3"></i>
                    <span>控制面板</span>
                </a>
                <a href="#teacher"
                   class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-300 hover:bg-gray-700 hover:text-white group">
                    <i class="fa fa-users w-5 h-5 mr-3"></i>
                    <span>教师管理</span>
                </a>
                <a href="#class"
                   class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-300 hover:bg-gray-700 hover:text-white group">
                    <i class="fa fa-graduation-cap w-5 h-5 mr-3"></i>
                    <span>班级管理</span>
                </a>
                <a href="#student"
                   class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-300 hover:bg-gray-700 hover:text-white group">
                    <i class="fa fa-user-circle w-5 h-5 mr-3"></i>
                    <span>学生管理</span>
                </a>
                <a href="#course"
                   class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-300 hover:bg-gray-700 hover:text-white group">
                    <i class="fa fa-book w-5 h-5 mr-3"></i>
                    <span>课程管理</span>
                </a>
                <a href="#teaching"
                   class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-300 hover:bg-gray-700 hover:text-white group">
                    <i class="fa fa-calendar-check-o w-5 h-5 mr-3"></i>
                    <span>带课管理</span>
                </a>
                <a href="#exam"
                   class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-300 hover:bg-gray-700 hover:text-white group">
                    <i class="fa fa-file-text-o w-5 h-5 mr-3"></i>
                    <span>考试管理</span>
                </a>
                <a href="#settings"
                   class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-300 hover:bg-gray-700 hover:text-white group">
                    <i class="fa fa-cog w-5 h-5 mr-3"></i>
                    <span>系统设置</span>
                </a>
            </div>
        </nav>

        <!-- 退出登录 -->
        <div class="border-t border-gray-800 p-4">
            <a href="#"
               class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-300 hover:bg-gray-700 hover:text-white group">
                <i class="fa fa-sign-out w-5 h-5 mr-3"></i>
                <span>退出登录</span>
            </a>
        </div>
    </div>

    <!-- 移动端侧边栏按钮 -->
    <div class="md:hidden fixed top-4 left-4 z-50">
        <button id="sidebar-toggle"
                class="p-2 rounded-md text-gray-600 hover:text-white hover:bg-primary focus:outline-none">
            <i class="fa fa-bars text-xl"></i>
        </button>
    </div>

    <!-- 主内容区域 -->
    <div class="flex-1 flex flex-col overflow-hidden ml-0 md:ml-64 transition-all duration-300 ease-in-out">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm z-20">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 flex items-center">
                            <h1 class="text-xl font-semibold text-primary">教育管理系统</h1>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <button id="change-password-btn"
                                    class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition-all duration-200 flex items-center">
                                <i class="fa fa-key mr-2"></i> 修改密码
                            </button>
                        </div>
                        <div class="ml-4 flex items-center md:ml-6">
                            <button class="p-1 rounded-full text-gray-500 hover:text-primary focus:outline-none">
                                <span class="sr-only">查看通知</span>
                                <i class="fa fa-bell-o text-xl"></i>
                            </button>
                            <div class="ml-3 relative">
                                <div class="flex items-center">
                                    <div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center">
                                        <i class="fa fa-user text-white"></i>
                                    </div>
                                    <span class="ml-2 text-sm font-medium text-gray-700 hidden md:block">管理员</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- 页面内容 -->
        <main class="flex-1 overflow-y-auto bg-gray-100 p-4 sm:p-6 lg:p-8">
            <!-- 控制面板 -->
            <section id="dashboard-section" class="space-y-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-900">控制面板</h2>
                        <p class="mt-1 text-sm text-gray-500">欢迎回来，管理员！</p>
                    </div>
                    <div class="mt-4 flex md:mt-0 md:ml-4">
                        <button type="button" class="btn-secondary">
                            <i class="fa fa-download mr-2"></i> 导出报表
                        </button>
                    </div>
                </div>

                <!-- 数据概览卡片 -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="card">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
                                <i class="fa fa-users text-primary text-xl"></i>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">教师总数</dt>
                                    <dd>
                                        <div class="text-lg font-semibold text-gray-900">
                                            <span id="teacher-count">0</span>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                                <span class="text-green-500 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 2.4%
                                </span>
                            <span class="ml-2 text-gray-500">相比上月</span>
                        </div>
                    </div>

                    <div class="card">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 bg-green-100 p-3 rounded-full">
                                <i class="fa fa-graduation-cap text-success text-xl"></i>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">班级总数</dt>
                                    <dd>
                                        <div class="text-lg font-semibold text-gray-900">
                                            <span id="class-count">0</span>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                                <span class="text-green-500 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 5.1%
                                </span>
                            <span class="ml-2 text-gray-500">相比上月</span>
                        </div>
                    </div>

                    <div class="card">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full">
                                <i class="fa fa-user-circle text-accent text-xl"></i>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">学生总数</dt>
                                    <dd>
                                        <div class="text-lg font-semibold text-gray-900">
                                            <span id="student-count">0</span>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                                <span class="text-green-500 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 8.3%
                                </span>
                            <span class="ml-2 text-gray-500">相比上月</span>
                        </div>
                    </div>

                    <div class="card">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 bg-orange-100 p-3 rounded-full">
                                <i class="fa fa-book text-warning text-xl"></i>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">课程总数</dt>
                                    <dd>
                                        <div class="text-lg font-semibold text-gray-900">
                                            <span id="course-count">0</span>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                                <span class="text-green-500 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 3.7%
                                </span>
                            <span class="ml-2 text-gray-500">相比上月</span>
                        </div>
                    </div>
                </div>

                <!-- 图表区域 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="card lg:col-span-2">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="text-lg font-semibold text-gray-900">用户增长趋势</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-sm rounded-md bg-primary/10 text-primary">周</button>
                                <button class="px-3 py-1 text-sm rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200">
                                    月
                                </button>
                                <button class="px-3 py-1 text-sm rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200">
                                    年
                                </button>
                            </div>
                        </div>
                        <div class="h-80">
                            <canvas id="userGrowthChart"></canvas>
                        </div>
                    </div>

                    <div class="card">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="text-lg font-semibold text-gray-900">用户分布</h3>
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                        <div class="h-80">
                            <canvas id="userDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 教师管理模块 -->
            <section id="teacher-section" class="hidden space-y-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-900">教师管理</h2>
                        <p class="mt-1 text-sm text-gray-500">管理系统中的教师账户和信息</p>
                    </div>
                    <div class="mt-4 flex md:mt-0 md:ml-4">
                        <button id="add-teacher-btn" class="btn-primary">
                            <i class="fa fa-plus mr-2"></i> 添加教师
                        </button>
                    </div>
                </div>

                <!-- 搜索和筛选 -->
                <div class="card">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
                        <div class="flex-1">
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-search text-gray-400"></i>
                                </div>
                                <input type="text" id="teacher-search" class="input-field pl-10"
                                       placeholder="搜索教师编号或姓名...">
                            </div>
                        </div>
                        <div class="ml-4 flex space-x-2">
                            <select id="teacher-status-filter" class="input-field">
                                <option value="all">所有状态</option>
                                <option value="active">已启用</option>
                                <option value="disabled">已禁用</option>
                            </select>
                            <button id="search-teacher-btn" class="btn-primary">
                                <i class="fa fa-search mr-2"></i> 搜索
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 教师列表 -->
                <div class="card">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                            <tr>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    教师编号
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    姓名
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    性别
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    邮箱
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    状态
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                            </thead>
                            <tbody id="teacher-list" class="bg-white divide-y divide-gray-200">
                            <!-- 教师数据将通过JavaScript动态填充 -->
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="flex items-center justify-between px-4 py-3 sm:px-6">
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    显示第 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共
                                    <span class="font-medium" id="teacher-total">0</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                                     aria-label="Pagination">
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">上一页</span>
                                        <i class="fa fa-chevron-left"></i>
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white hover:bg-primary/90">
                                        1
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        2
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        3
                                    </a>
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                            ...
                                        </span>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        10
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">下一页</span>
                                        <i class="fa fa-chevron-right"></i>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 班级管理模块 -->
            <section id="class-section" class="hidden space-y-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-900">班级管理</h2>
                        <p class="mt-1 text-sm text-gray-500">管理系统中的班级信息</p>
                    </div>
                    <div class="mt-4 flex md:mt-0 md:ml-4">
                        <button id="add-class-btn" class="btn-primary">
                            <i class="fa fa-plus mr-2"></i> 添加班级
                        </button>
                    </div>
                </div>

                <!-- 搜索和筛选 -->
                <div class="card">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
                        <div class="flex-1">
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-search text-gray-400"></i>
                                </div>
                                <input type="text" id="class-search" class="input-field pl-10"
                                       placeholder="搜索班级编号或名称...">
                            </div>
                        </div>
                        <div class="ml-4 flex space-x-2">
                            <button id="search-class-btn" class="btn-primary">
                                <i class="fa fa-search mr-2"></i> 搜索
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 班级列表 -->
                <div class="card">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                            <tr>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    班级编号
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    班级名称
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    班主任
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    学生人数
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    创建时间
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                            </thead>
                            <tbody id="class-list" class="bg-white divide-y divide-gray-200">
                            <!-- 班级数据将通过JavaScript动态填充 -->
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="flex items-center justify-between px-4 py-3 sm:px-6">
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    显示第 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共
                                    <span class="font-medium" id="class-total">0</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                                     aria-label="Pagination">
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">上一页</span>
                                        <i class="fa fa-chevron-left"></i>
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white hover:bg-primary/90">
                                        1
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        2
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        3
                                    </a>
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                            ...
                                        </span>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        8
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">下一页</span>
                                        <i class="fa fa-chevron-right"></i>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 学生管理模块 -->
            <section id="student-section" class="hidden space-y-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-900">学生管理</h2>
                        <p class="mt-1 text-sm text-gray-500">管理系统中的学生信息</p>
                    </div>
                    <div class="mt-4 flex md:mt-0 md:ml-4">
                        <button id="add-student-btn" class="btn-primary">
                            <i class="fa fa-plus mr-2"></i> 添加学生
                        </button>
                        <button id="upload-students-btn" class="btn-secondary">
                            <i class="fa fa-upload mr-2"></i> 批量导入
                        </button>
                    </div>
                </div>

                <!-- 搜索和筛选 -->
                <div class="card">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
                        <div class="flex-1">
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-search text-gray-400"></i>
                                </div>
                                <input type="text" id="student-search" class="input-field pl-10"
                                       placeholder="搜索学号或姓名...">
                            </div>
                        </div>
                        <div class="ml-4 flex space-x-2">
                            <select id="student-class-filter" class="input-field">
                                <option value="all">所有班级</option>
                                <!-- 班级选项将通过JavaScript动态填充 -->
                            </select>
                            <button id="search-student-btn" class="btn-primary">
                                <i class="fa fa-search mr-2"></i> 搜索
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 学生列表 -->
                <div class="card">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                            <tr>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    学号
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    姓名
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    性别
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    班级
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    邮箱
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    创建时间
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                            </thead>
                            <tbody id="student-list" class="bg-white divide-y divide-gray-200">
                            <!-- 学生数据将通过JavaScript动态填充 -->
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="flex items-center justify-between px-4 py-3 sm:px-6">
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    显示第 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共
                                    <span class="font-medium" id="student-total">0</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                                     aria-label="Pagination">
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">上一页</span>
                                        <i class="fa fa-chevron-left"></i>
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white hover:bg-primary/90">
                                        1
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        2
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        3
                                    </a>
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                            ...
                                        </span>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        12
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">下一页</span>
                                        <i class="fa fa-chevron-right"></i>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 课程管理模块 -->
            <section id="course-section" class="hidden space-y-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-900">课程管理</h2>
                        <p class="mt-1 text-sm text-gray-500">管理系统中的课程信息</p>
                    </div>
                    <div class="mt-4 flex md:mt-0 md:ml-4">
                        <button id="add-course-btn" class="btn-primary">
                            <i class="fa fa-plus mr-2"></i> 添加课程
                        </button>
                    </div>
                </div>

                <!-- 搜索和筛选 -->
                <div class="card">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
                        <div class="flex-1">
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-search text-gray-400"></i>
                                </div>
                                <input type="text" id="course-search" class="input-field pl-10"
                                       placeholder="搜索课程编号或名称...">
                            </div>
                        </div>
                        <div class="ml-4 flex space-x-2">
                            <button id="search-course-btn" class="btn-primary">
                                <i class="fa fa-search mr-2"></i> 搜索
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 课程列表 -->
                <div class="card">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                            <tr>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    课程编号
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    课程名称
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    课程描述
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    授课教师
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    创建时间
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                            </thead>
                            <tbody id="course-list" class="bg-white divide-y divide-gray-200">
                            <!-- 课程数据将通过JavaScript动态填充 -->
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="flex items-center justify-between px-4 py-3 sm:px-6">
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    显示第 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共
                                    <span class="font-medium" id="course-total">0</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                                     aria-label="Pagination">
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">上一页</span>
                                        <i class="fa fa-chevron-left"></i>
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white hover:bg-primary/90">
                                        1
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        2
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        3
                                    </a>
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                            ...
                                        </span>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        7
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">下一页</span>
                                        <i class="fa fa-chevron-right"></i>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 带课管理模块 -->
            <section id="teaching-section" class="hidden space-y-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-900">带课管理</h2>
                        <p class="mt-1 text-sm text-gray-500">管理教师授课安排</p>
                    </div>
                    <div class="mt-4 flex md:mt-0 md:ml-4">
                        <button id="add-teaching-btn" class="btn-primary">
                            <i class="fa fa-plus mr-2"></i> 添加带课安排
                        </button>
                    </div>
                </div>

                <!-- 搜索和筛选 -->
                <div class="card">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
                            <select id="teaching-teacher-filter" class="input-field">
                                <option value="all">所有教师</option>
                                <!-- 教师选项将通过JavaScript动态填充 -->
                            </select>
                            <select id="teaching-course-filter" class="input-field">
                                <option value="all">所有课程</option>
                                <!-- 课程选项将通过JavaScript动态填充 -->
                            </select>
                            <select id="teaching-class-filter" class="input-field">
                                <option value="all">所有班级</option>
                                <!-- 班级选项将通过JavaScript动态填充 -->
                            </select>
                        </div>
                        <div class="ml-4 flex space-x-2">
                            <button id="search-teaching-btn" class="btn-primary">
                                <i class="fa fa-search mr-2"></i> 搜索
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 带课列表 -->
                <div class="card">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                            <tr>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    安排ID
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    教师
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    课程
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    班级
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    开始时间
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    结束时间
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                            </thead>
                            <tbody id="teaching-list" class="bg-white divide-y divide-gray-200">
                            <!-- 带课数据将通过JavaScript动态填充 -->
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="flex items-center justify-between px-4 py-3 sm:px-6">
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    显示第 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共
                                    <span class="font-medium" id="teaching-total">0</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                                     aria-label="Pagination">
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">上一页</span>
                                        <i class="fa fa-chevron-left"></i>
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white hover:bg-primary/90">
                                        1
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        2
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        3
                                    </a>
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                            ...
                                        </span>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        9
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">下一页</span>
                                        <i class="fa fa-chevron-right"></i>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 考试管理模块 -->
            <section id="exam-section" class="hidden space-y-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-900">考试管理</h2>
                        <p class="mt-1 text-sm text-gray-500">管理系统中的考试和试题</p>
                    </div>
                    <div class="mt-4 flex md:mt-0 md:ml-4">
                        <button id="add-exam-btn" class="btn-primary">
                            <i class="fa fa-plus mr-2"></i> 添加考试
                        </button>
                        <button id="add-question-btn" class="btn-secondary">
                            <i class="fa fa-plus mr-2"></i> 添加试题
                        </button>
                        <button id="upload-questions-btn" class="btn-secondary">
                            <i class="fa fa-upload mr-2"></i> 批量导入试题
                        </button>
                    </div>
                </div>

                <!-- 考试列表 -->
                <div class="card">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 mb-6">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900">考试列表</h3>
                        </div>
                        <div class="ml-4 flex space-x-2">
                            <select id="exam-course-filter" class="input-field">
                                <option value="all">所有课程</option>
                                <!-- 课程选项将通过JavaScript动态填充 -->
                            </select>
                            <select id="exam-status-filter" class="input-field">
                                <option value="all">所有状态</option>
                                <option value="pending">待批准</option>
                                <option value="approved">已批准</option>
                                <option value="active">已激活</option>
                                <option value="completed">已完成</option>
                            </select>
                            <button id="search-exam-btn" class="btn-primary">
                                <i class="fa fa-search mr-2"></i> 搜索
                            </button>
                        </div>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                            <tr>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    考试ID
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    考试名称
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    课程
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    出题教师
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    创建时间
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    状态
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                            </thead>
                            <tbody id="exam-list" class="bg-white divide-y divide-gray-200">
                            <!-- 考试数据将通过JavaScript动态填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 试题管理 -->
                <div class="card">
<%--                    <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 mb-6">--%>
<%--                        <div>--%>
<%--                            <h3 class="text-lg font-semibold text-gray-900">试题管理</h3>--%>
<%--                        </div>--%>
<%--                        <div class="ml-4 flex space-x-2">--%>
<%--                            <select id="question-course-filter" class="input-field">--%>
<%--                                <option value="all">所有课程</option>--%>
<%--                                <!-- 课程选项将通过JavaScript动态填充 -->--%>
<%--                            </select>--%>
<%--                            <button id="search-question-btn" class="btn-primary">--%>
<%--                                <i class="fa fa-search mr-2"></i> 搜索--%>
<%--                            </button>--%>
<%--                        </div>--%>
<%--                    </div>--%>

<%--                    <div class="overflow-x-auto">--%>
<%--                        <table class="min-w-full divide-y divide-gray-200">--%>
<%--                            <thead class="bg-gray-50">--%>
<%--                            <tr>--%>
<%--                                <th scope="col"--%>
<%--                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">--%>
<%--                                    试题ID--%>
<%--                                </th>--%>
<%--                                <th scope="col"--%>
<%--                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">--%>
<%--                                    课程--%>
<%--                                </th>--%>
<%--                                <th scope="col"--%>
<%--                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">--%>
<%--                                    题目描述--%>
<%--                                </th>--%>
<%--                                <th scope="col"--%>
<%--                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">--%>
<%--                                    分值--%>
<%--                                </th>--%>
<%--                                <th scope="col"--%>
<%--                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">--%>
<%--                                    创建时间--%>
<%--                                </th>--%>
<%--                                <th scope="col"--%>
<%--                                    class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">--%>
<%--                                    操作--%>
<%--                                </th>--%>
<%--                            </tr>--%>
<%--                            </thead>--%>
<%--                            <tbody id="question-list" class="bg-white divide-y divide-gray-200">--%>
<%--                            <!-- 试题数据将通过JavaScript动态填充 -->--%>
<%--                            </tbody>--%>
<%--                        </table>--%>
<%--                    </div>--%>
                </div>
            </section>
        </main>
    </div>
</div>

<!-- 修改密码模态框 -->
<div id="change-password-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full mx-auto p-6 transform transition-all">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">修改密码</h3>
                <button id="close-password-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="change-password-form">
                <div class="mb-4">
                    <label for="current-password" class="block text-sm font-medium text-gray-700">当前密码</label>
                    <input type="password" id="current-password" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="new-password" class="block text-sm font-medium text-gray-700">新密码</label>
                    <input type="password" id="new-password" class="input-field" required>
                </div>
                <div class="mb-6">
                    <label for="confirm-password" class="block text-sm font-medium text-gray-700">确认新密码</label>
                    <input type="password" id="confirm-password" class="input-field" required>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-password-btn" class="btn-secondary">取消</button>
                    <button type="submit" class="btn-primary">修改密码</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 添加教师模态框 -->
<div id="add-teacher-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full mx-auto p-6 transform transition-all">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加教师</h3>
                <button id="close-teacher-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="add-teacher-form">
                <div class="mb-4">
                    <label for="teacher-id" class="block text-sm font-medium text-gray-700">教师编号</label>
                    <input type="text" id="teacher-id" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="teacher-name" class="block text-sm font-medium text-gray-700">姓名</label>
                    <input type="text" id="teacher-name" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="teacher-gender" class="block text-sm font-medium text-gray-700">性别</label>
                    <select id="teacher-gender" class="input-field" required>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="teacher-email" class="block text-sm font-medium text-gray-700">邮箱</label>
                    <input type="email" id="teacher-email" class="input-field">
                </div>
                <div class="mb-4">
                    <label for="teacher-password" class="block text-sm font-medium text-gray-700">初始密码</label>
                    <input type="password" id="teacher-password" class="input-field" required>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-teacher-btn" class="btn-secondary">取消</button>
                    <button type="submit" id="submit-add-teacher-btn" class="btn-primary">添加教师</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 查看/编辑教师模态框 -->
<div id="edit-teacher-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full mx-auto p-6 transform transition-all">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">编辑教师信息</h3>
                <button id="close-edit-teacher-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="edit-teacher-form">
                <input type="hidden" id="edit-teacher-id">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">教师编号</label>
                    <input type="text" id="edit-teacher-code" class="input-field" disabled>
                </div>
                <div class="mb-4">
                    <label for="edit-teacher-name" class="block text-sm font-medium text-gray-700">姓名</label>
                    <input type="text" id="edit-teacher-name" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="edit-teacher-gender" class="block text-sm font-medium text-gray-700">性别</label>
                    <select id="edit-teacher-gender" class="input-field" required>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="edit-teacher-email" class="block text-sm font-medium text-gray-700">邮箱</label>
                    <input type="email" id="edit-teacher-email" class="input-field">
                </div>
                <div class="mb-4">
                    <label for="edit-teacher-status" class="block text-sm font-medium text-gray-700">状态</label>
                    <select id="edit-teacher-status" class="input-field" required>
                        <option value="active">已启用</option>
                        <option value="disabled">已禁用</option>
                    </select>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-edit-teacher-btn" class="btn-secondary">取消</button>
                    <button type="submit" class="btn-primary">保存修改</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 添加班级模态框 -->
<div id="add-class-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full mx-auto p-6 transform transition-all">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加班级</h3>
                <button id="close-class-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="add-class-form">
                <div class="mb-4">
                    <label for="class-id" class="block text-sm font-medium text-gray-700">班级编号</label>
                    <input type="text" id="class-id" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="class-name" class="block text-sm font-medium text-gray-700">班级名称</label>
                    <input type="text" id="class-name" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="class-teacher" class="block text-sm font-medium text-gray-700">班主任</label>
                    <select id="class-teacher" class="input-field" required>
                        <!-- 教师选项将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="mb-4">
                    <label for="class-description" class="block text-sm font-medium text-gray-700">备注</label>
                    <textarea id="class-description" class="input-field" rows="3"></textarea>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-class-btn" class="btn-secondary">取消</button>
                    <button type="submit" class="btn-primary">添加班级</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 添加学生模态框 -->
<div id="add-student-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full mx-auto p-6 transform transition-all">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加学生</h3>
                <button id="close-student-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="add-student-form">
                <div class="mb-4">
                    <label for="student-id" class="block text-sm font-medium text-gray-700">学号</label>
                    <input type="text" id="student-id" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="student-name" class="block text-sm font-medium text-gray-700">姓名</label>
                    <input type="text" id="student-name" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="student-gender" class="block text-sm font-medium text-gray-700">性别</label>
                    <select id="student-gender" class="input-field" required>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="student-class" class="block text-sm font-medium text-gray-700">班级</label>
                    <select id="student-class" class="input-field" required>
                        <!-- 班级选项将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="mb-4">
                    <label for="student-email" class="block text-sm font-medium text-gray-700">邮箱</label>
                    <input type="email" id="student-email" class="input-field">
                </div>
                <div class="mb-4">
                    <label for="student-password" class="block text-sm font-medium text-gray-700">初始密码</label>
                    <input type="password" id="student-password" class="input-field" required>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-student-btn" class="btn-secondary">取消</button>
                    <button type="submit" class="btn-primary">添加学生</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 添加课程模态框 -->
<div id="add-course-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full mx-auto p-6 transform transition-all">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加课程</h3>
                <button id="close-course-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="add-course-form">
                <div class="mb-4">
                    <label for="course-id" class="block text-sm font-medium text-gray-700">课程编号</label>
                    <input type="text" id="course-id" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="course-name" class="block text-sm font-medium text-gray-700">课程名称</label>
                    <input type="text" id="course-name" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="course-description" class="block text-sm font-medium text-gray-700">课程描述</label>
                    <textarea id="course-description" class="input-field" rows="3" required></textarea>
                </div>
                <div class="mb-4">
                    <label for="course-teacher" class="block text-sm font-medium text-gray-700">授课教师</label>
                    <select id="course-teacher" class="input-field" required>
                        <!-- 教师选项将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-course-btn" class="btn-secondary">取消</button>
                    <button type="submit" class="btn-primary">添加课程</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 添加带课安排模态框 -->
<div id="add-teaching-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full mx-auto p-6 transform transition-all">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加带课安排</h3>
                <button id="close-teaching-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="add-teaching-form">
                <div class="mb-4">
                    <label for="teaching-teacher" class="block text-sm font-medium text-gray-700">教师</label>
                    <select id="teaching-teacher" class="input-field" required>
                        <!-- 教师选项将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="mb-4">
                    <label for="teaching-course" class="block text-sm font-medium text-gray-700">课程</label>
                    <select id="teaching-course" class="input-field" required>
                        <!-- 课程选项将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="mb-4">
                    <label for="teaching-class" class="block text-sm font-medium text-gray-700">班级</label>
                    <select id="teaching-class" class="input-field" required>
                        <!-- 班级选项将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="mb-4">
                    <label for="teaching-start" class="block text-sm font-medium text-gray-700">开始时间</label>
                    <input type="date" id="teaching-start" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="teaching-end" class="block text-sm font-medium text-gray-700">结束时间</label>
                    <input type="date" id="teaching-end" class="input-field" required>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-teaching-btn" class="btn-secondary">取消</button>
                    <button type="submit" class="btn-primary">添加安排</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 添加考试模态框 -->
<div id="add-exam-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full mx-auto p-6 transform transition-all">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加考试</h3>
                <button id="close-exam-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="add-exam-form">
                <div class="mb-4">
                    <label for="exam-name" class="block text-sm font-medium text-gray-700">考试名称</label>
                    <input type="text" id="exam-name" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="exam-course" class="block text-sm font-medium text-gray-700">课程</label>
                    <select id="exam-course" class="input-field" required>
                        <!-- 课程选项将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="mb-4">
                    <label for="exam-teacher" class="block text-sm font-medium text-gray-700">出题教师</label>
                    <select id="exam-teacher" class="input-field" required>
                        <!-- 教师选项将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="mb-4">
                    <label for="exam-date" class="block text-sm font-medium text-gray-700">考试日期</label>
                    <input type="date" id="exam-date" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="exam-duration" class="block text-sm font-medium text-gray-700">考试时长(分钟)</label>
                    <input type="number" id="exam-duration" class="input-field" required>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-exam-btn" class="btn-secondary">取消</button>
                    <button type="submit" class="btn-primary">添加考试</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 添加试题模态框 -->
<div id="add-question-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-lg w-full mx-auto p-6 transform transition-all">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加试题</h3>
                <button id="close-question-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="add-question-form">
                <div class="mb-4">
                    <label for="question-course" class="block text-sm font-medium text-gray-700">课程</label>
                    <select id="question-course" class="input-field" required>
                        <!-- 课程选项将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="mb-4">
                    <label for="question-content" class="block text-sm font-medium text-gray-700">题目描述</label>
                    <textarea id="question-content" class="input-field" rows="3" required></textarea>
                </div>
                <div class="mb-4">
                    <label for="question-option-a" class="block text-sm font-medium text-gray-700">选项A</label>
                    <input type="text" id="question-option-a" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="question-option-b" class="block text-sm font-medium text-gray-700">选项B</label>
                    <input type="text" id="question-option-b" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="question-option-c" class="block text-sm font-medium text-gray-700">选项C</label>
                    <input type="text" id="question-option-c" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="question-option-d" class="block text-sm font-medium text-gray-700">选项D</label>
                    <input type="text" id="question-option-d" class="input-field" required>
                </div>
                <div class="mb-4">
                    <label for="question-answer" class="block text-sm font-medium text-gray-700">正确答案</label>
                    <select id="question-answer" class="input-field" required>
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="question-score" class="block text-sm font-medium text-gray-700">分值</label>
                    <input type="number" id="question-score" class="input-field" required>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-question-btn" class="btn-secondary">取消</button>
                    <button type="submit" class="btn-primary">添加试题</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 批量导入学生模态框 -->
<div id="upload-students-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full mx-auto p-6 transform transition-all">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">批量导入学生</h3>
                <button id="close-upload-students-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="upload-students-form" enctype="multipart/form-data">
                <div class="mb-4">
                    <label for="upload-students-class" class="block text-sm font-medium text-gray-700">选择班级</label>
                    <select id="upload-students-class" class="input-field" required>
                        <!-- 班级选项将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">上传Excel文件</label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
                        <div class="space-y-1 text-center">
                            <i class="fa fa-cloud-upload text-gray-400 text-3xl"></i>
                            <div class="flex text-sm text-gray-600">
                                <label for="file-upload"
                                       class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80">
                                    <span>上传文件</span>
                                    <input id="file-upload" name="file-upload" type="file" accept=".xlsx,.xls"
                                           class="sr-only">
                                </label>
                                <p class="pl-1">或拖放文件</p>
                            </div>
                            <p class="text-xs text-gray-500">
                                支持 XLSX, XLS 格式
                            </p>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-upload-students-btn" class="btn-secondary">取消</button>
                    <button type="submit" class="btn-primary">导入学生</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 批量导入试题模态框 -->
<div id="upload-questions-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full mx-auto p-6 transform transition-all">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">批量导入试题</h3>
                <button id="close-upload-questions-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="upload-questions-form" enctype="multipart/form-data">
                <div class="mb-4">
                    <label for="upload-questions-course"
                           class="block text-sm font-medium text-gray-700">选择课程</label>
                    <select id="upload-questions-course" class="input-field" required>
                        <!-- 课程选项将通过JavaScript动态填充 -->
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">上传Excel文件</label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
                        <div class="space-y-1 text-center">
                            <i class="fa fa-cloud-upload text-gray-400 text-3xl"></i>
                            <div class="flex text-sm text-gray-600">
                                <label for="questions-file-upload"
                                       class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80">
                                    <span>上传文件</span>
                                    <input id="questions-file-upload" name="questions-file-upload" type="file"
                                           accept=".xlsx,.xls" class="sr-only">
                                </label>
                                <p class="pl-1">或拖放文件</p>
                            </div>
                            <p class="text-xs text-gray-500">
                                支持 XLSX, XLS 格式
                            </p>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-upload-questions-btn" class="btn-secondary">取消</button>
                    <button type="submit" class="btn-primary">导入试题</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 通知提示 -->
<div id="notification"
     class="fixed top-4 right-4 max-w-sm w-full bg-white rounded-lg shadow-lg p-4 transform transition-all duration-300 translate-x-full z-50 flex items-start">
    <div id="notification-icon"
         class="flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full bg-green-100 text-green-500">
        <i class="fa fa-check"></i>
    </div>
    <div class="ml-3">
        <h3 id="notification-title" class="text-sm font-medium text-gray-900">操作成功</h3>
        <div id="notification-message" class="mt-1 text-sm text-gray-500">
            您的操作已成功完成。
        </div>
    </div>
    <button id="close-notification" class="ml-auto flex-shrink-0 text-gray-400 hover:text-gray-600">
        <i class="fa fa-times"></i>
    </button>
</div>

<script>
    // 页面初始化
    document.addEventListener('DOMContentLoaded', function () {
        // 初始化图表

        initCharts();

        // 侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', function () {
            const sidebar = document.querySelector('.md\\:flex');
            sidebar.classList.toggle('hidden');
        });

        // 导航菜单切换
        const navLinks = document.querySelectorAll('nav a');
        navLinks.forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();

                // 获取目标部分
                const target = this.getAttribute('href').substring(1);
                const sections = document.querySelectorAll('main > section');

                // 隐藏所有部分
                sections.forEach(section => {
                    section.classList.add('hidden');
                });

                // 显示目标部分
                document.getElementById(target + '-section').classList.remove('hidden');

                // 更新活动链接样式
                navLinks.forEach(l => l.classList.remove('bg-primary/10', 'text-primary'));
                this.classList.add('bg-primary/10', 'text-primary');
            });
        });

        // 模态框事件处理
        setupModalEvents();

        // 模拟数据加载
        //loadMockData();
    });

    // 初始化图表
    function initCharts() {






        // 用户增长趋势图
        const growthCtx = document.getElementById('userGrowthChart').getContext('2d');
        new Chart(growthCtx, {
                type: 'line',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [
                        {
                            label: '教师',
                            data: [12, 19, 15, 21, 25, 28, 30],
                            borderColor: '#165DFF',
                            backgroundColor: 'rgba(22, 93, 255, 0.1)',
                            fill: true,
                        },
                        {
                            label: '学生',
                            data: [50, 65, 72, 68, 75, 82, 88],
                            borderColor: '#0FC6C2',
                            backgroundColor: 'rgba(15, 198, 194, 0.1)',
                            fill: true,
                        }
                    ],
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            legend: {
                                position: 'top'
                            }
                        }
                    }
                }
            }
        );
        const distributionCtx = document.getElementById('userDistributionChart').getContext('2d');
        fetch("getMessage.jsp")
            .then(response => {
                if (!response.ok) {
                    throw new Error("HTTP错误，状态码：" + response.status);
                }
                return response.json();
            }).then(message => {
            document.getElementById("teacher-count").innerText=message[0].teacher;
            document.getElementById("student-count").innerText=message[0].student;
            document.getElementById("class-count").innerText=message[0].classes;
            document.getElementById("course-count").innerText=message[0].course;
                const teacher = message[0].teacher;
                const student = message[0].student;
                const admin = message[0].admin;
                // console.log(teacher)
            new Chart(distributionCtx, {
                type: 'doughnut',
                data: {
                    labels: ['教师', '学生', '管理员'],
                    datasets: [{
                        label: '用户类型',
                        data: [teacher,student,admin],
                        backgroundColor: ['#165DFF', '#0FC6C2', '#722ED1'],
                        hoverOffset: 4
                    }]
                }
            });
        })
            .catch(error => {
                console.error('获取数据失败:', error);
            });

        // 用户分布饼图
        // const distributionCtx = document.getElementById('userDistributionChart').getContext('2d');
        // new Chart(distributionCtx, {
        //     type: 'doughnut',
        //     data: {
        //         labels: ['教师', '学生', '管理员'],
        //         datasets: [{
        //             label: '用户类型',
        //             data: [15, 85, 5],
        //             backgroundColor: ['#165DFF', '#0FC6C2', '#722ED1'],
        //             hoverOffset: 4
        //         }]
        //     }
        // });
    }

    // 模态框事件处理
    function setupModalEvents() {
        // 显示通知提示
        <%--function showNotification(title, message) {--%>
        <%--    // 实际项目中可以使用更美观的通知组件--%>
        <%--    alert(`${title}\n${message}`);--%>
        <%--}--%>

// 模态框控制通用函数
        function setupModal(modalId, openBtnId, closeBtnId, cancelBtnId, formId, submitHandler) {
            const modal = document.getElementById(modalId);
            const openBtn = document.getElementById(openBtnId);
            const closeBtn = document.getElementById(closeBtnId);
            const cancelBtn = document.getElementById(cancelBtnId);
            const form = document.getElementById(formId);

            // 打开模态框
            if (openBtn) {
                openBtn.addEventListener('click', () => {
                    modal.classList.remove('hidden');
                });
            }

            // 关闭模态框
            if (closeBtn) {
                closeBtn.addEventListener('click', () => {
                    modal.classList.add('hidden');
                    if (form) form.reset();
                });
            }

            // 取消按钮
            if (cancelBtn) {
                cancelBtn.addEventListener('click', () => {
                    modal.classList.add('hidden');
                    if (form) form.reset();
                });
            }

            // 点击模态框外部关闭
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.classList.add('hidden');
                    if (form) form.reset();
                }
            });

            // 表单提交
            if (form && submitHandler) {
                form.addEventListener('submit', (e) => {
                    e.preventDefault();
                    submitHandler(e);
                });
            }
        }

// 初始化所有模态框
        //document.addEventListener('DOMContentLoaded', function () {
            // 修改密码模态框
            setupModal(
                'change-password-modal',
                'change-password-btn',
                'close-password-modal',
                'cancel-password-btn',
                'change-password-form',
                function (e) {
                    const oldPwd = document.getElementById("current-password").value;
                    const newPwd = document.getElementById("new-password").value;
                    const confirmPwd = document.getElementById("confirm-password").value;

                    if (newPwd !== confirmPwd) {
                        alert('两次新密码不相同');
                        return;
                    }

                    // 调用后台修改密码接口
                    fetch('changeAdminPassword.jsp', {
                        method: 'POST',
                        body: new URLSearchParams({
                            'oldPassword': oldPwd,
                            'newPassword': newPwd
                        })
                    })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data);
                            showNotification('操作成功', '密码已成功修改');
                            document.getElementById('change-password-modal').classList.add('hidden');
                        })
                        .catch(error => {
                            console.error('修改密码失败:', error);
                            showNotification('操作失败', '修改密码过程中出现错误');
                        });

                    e.target.reset();
                }
            );

            // 添加教师模态框
            setupModal(
                'add-teacher-modal',
                'add-teacher-btn',
                'close-teacher-modal',
                'cancel-teacher-btn',
                'add-teacher-form',
                function (e) {
                    const teacherId = document.getElementById("teacher-id").value;
                    const teacherName = document.getElementById("teacher-name").value;
                    const teacherGender = document.getElementById("teacher-gender").value;
                    const teacherEmail = document.getElementById("teacher-email").value;
                    const teacherPassword = document.getElementById("teacher-password").value;

                    // 调用后台添加教师接口
                    fetch('addTeacher.jsp', {
                        method: 'POST',
                        body: new URLSearchParams({
                            'id': teacherId,
                            'name': teacherName,
                            'gender': teacherGender,
                            'email': teacherEmail,
                            'password': teacherPassword
                        })
                    })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data);
                            showNotification('操作成功', '教师账户已成功添加');
                            document.getElementById('add-teacher-modal').classList.add('hidden');
                        })
                        .catch(error => {
                            console.error('添加教师失败:', error);
                            showNotification('操作失败', '添加教师过程中出现错误');
                        });

                    e.target.reset();
                }
            );

            // 编辑教师模态框
            document.getElementById('teacher-list').addEventListener('click', function (e) {
                if (e.target.closest('.edit-btn')) {
                    const row = e.target.closest('tr');
                    const teacherId = row.dataset.teacherId;

                    // 从服务器获取教师数据
                    fetch(`getTeachers.jsp?id=${teacherId}`)
                        .then(response => response.json())
                        .then(teacher => {
                            // 填充模态框表单
                            document.getElementById('edit-teacher-id').value = teacher[0].id;
                            document.getElementById('edit-teacher-code').value = teacher[0].username;
                            document.getElementById('edit-teacher-name').value = teacher[0].name;
                            document.getElementById('edit-teacher-gender').value = teacher[0].gender;
                            document.getElementById('edit-teacher-email').value = teacher[0].email;
                            document.getElementById('edit-teacher-status').value = teacher[0].status;

                            // 显示模态框
                            document.getElementById('edit-teacher-modal').classList.remove('hidden');
                        })
                        .catch(error => {
                            console.error('获取教师信息失败:', error);
                            showNotification('操作失败', '获取教师信息过程中出现错误');
                        });
                }
            });

            setupModal(
                'edit-teacher-modal',
                null,
                'close-edit-teacher-modal',
                'cancel-edit-teacher-btn',
                'edit-teacher-form',
                function (e) {
                    const teacherId = document.getElementById('edit-teacher-id').value;
                    const teacherName = document.getElementById('edit-teacher-name').value;
                    const teacherGender = document.getElementById('edit-teacher-gender').value;
                    const teacherEmail = document.getElementById('edit-teacher-email').value;
                    const teacherStatus = document.getElementById('edit-teacher-status').value;

                    // 调用后台修改教师接口
                    fetch('updateTeacher.jsp', {
                        method: 'POST',
                        body: new URLSearchParams({
                            'id': teacherId,
                            'name': teacherName,
                            'gender': teacherGender,
                            'email': teacherEmail,
                            'status': teacherStatus
                        })
                    })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data);
                            showNotification('操作成功', '教师信息已成功更新');
                            document.getElementById('edit-teacher-modal').classList.add('hidden');
                        })
                        .catch(error => {
                            console.error('更新教师失败:', error);
                            showNotification('操作失败', '更新教师过程中出现错误');
                        });

                    e.target.reset();
                }
            );

            // 添加班级模态框
            setupModal(
                'add-class-modal',
                'add-class-btn',
                'close-class-modal',
                'cancel-class-btn',
                'add-class-form',
                function (e) {
                    const classId = document.getElementById("class-id").value;
                    const className = document.getElementById("class-name").value;
                    const classTeacher = document.getElementById("class-teacher").value;
                    const classDescription = document.getElementById("class-description").value;

                    // 调用后台添加班级接口
                    fetch('addClass.jsp', {
                        method: 'POST',
                        body: new URLSearchParams({
                            'class_no': classId,
                            'class_name': className,
                            'headTeacher': classTeacher,
                            'description': classDescription
                        })
                    })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data);
                            showNotification('操作成功', '班级已成功添加');
                            document.getElementById('add-class-modal').classList.add('hidden');
                        })
                        .catch(error => {
                            console.error('添加班级失败:', error);
                            showNotification('操作失败', '添加班级过程中出现错误');
                        });

                    e.target.reset();
                }
            );

            // 添加学生模态框
            setupModal(
                'add-student-modal',
                'add-student-btn',
                'close-student-modal',
                'cancel-student-btn',
                'add-student-form',
                function (e) {
                    const studentId = document.getElementById("student-id").value;
                    const studentName = document.getElementById("student-name").value;
                    const studentGender = document.getElementById("student-gender").value;
                    const studentClass = document.getElementById("student-class").value;
                    const studentEmail = document.getElementById("student-email").value;
                    const studentPassword = document.getElementById("student-password").value;

                    // 调用后台添加学生接口
                    fetch('addStudent.jsp', {
                        method: 'POST',
                        body: new URLSearchParams({
                            'username': studentId,
                            'name': studentName,
                            'gender': studentGender,
                            'class_id': studentClass,
                            'email': studentEmail,
                            'password': studentPassword
                        })
                    })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data);
                            showNotification('操作成功', '学生账户已成功添加');
                            document.getElementById('add-student-modal').classList.add('hidden');
                        })
                        .catch(error => {
                            console.error('添加学生失败:', error);
                            showNotification('操作失败', '添加学生过程中出现错误');
                        });

                    e.target.reset();
                }
            );

            // 添加课程模态框
            setupModal(
                'add-course-modal',
                'add-course-btn',
                'close-course-modal',
                'cancel-course-btn',
                'add-course-form',
                function (e) {
                    const courseId = document.getElementById("course-id").value;
                    const courseName = document.getElementById("course-name").value;
                    const courseDescription = document.getElementById("course-description").value;
                    const courseTeacher = document.getElementById("course-teacher").value;

                    // 调用后台添加课程接口
                    fetch('addCourse.jsp', {
                        method: 'POST',
                        body: new URLSearchParams({
                            'course_no': courseId,
                            'course_name': courseName,
                            'description': courseDescription,
                            'admin_id': courseTeacher
                        })
                    })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data);
                            showNotification('操作成功', '课程已成功添加');
                            document.getElementById('add-course-modal').classList.add('hidden');
                        })
                        .catch(error => {
                            console.error('添加课程失败:', error);
                            showNotification('操作失败', '添加课程过程中出现错误');
                        });

                    e.target.reset();
                }
            );

            // 添加带课安排模态框
            setupModal(
                'add-teaching-modal',
                'add-teaching-btn',
                'close-teaching-modal',
                'cancel-teaching-btn',
                'add-teaching-form',
                function (e) {
                    const teacher = document.getElementById("teaching-teacher").value;
                    const course = document.getElementById("teaching-course").value;
                    const classId = document.getElementById("teaching-class").value;
                    const startDate = document.getElementById("teaching-start").value;
                    const endDate = document.getElementById("teaching-end").value;

                    // 调用后台添加带课安排接口
                    fetch('addTeaching.jsp', {
                        method: 'POST',
                        body: new URLSearchParams({
                            'teacher_id': teacher,
                            'course_id': course,
                            'class_id': classId,
                            'start_date': startDate,
                            'end_date': endDate
                        })
                    })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data);
                            showNotification('操作成功', '带课安排已成功添加');
                            document.getElementById('add-teaching-modal').classList.add('hidden');
                        })
                        .catch(error => {
                            console.error('添加带课安排失败:', error);
                            showNotification('操作失败', '添加带课安排过程中出现错误');
                        });

                    e.target.reset();
                }
            );

            // 添加考试模态框
            setupModal(
                'add-exam-modal',
                'add-exam-btn',
                'close-exam-modal',
                'cancel-exam-btn',
                'add-exam-form',
                function (e) {
                    const examName = document.getElementById("exam-name").value;
                    const examCourse = document.getElementById("exam-course").value;
                    const examTeacher = document.getElementById("exam-teacher").value;
                    const examDate = document.getElementById("exam-date").value;
                    const examDuration = document.getElementById("exam-duration").value;

                    // 调用后台添加考试接口
                    fetch('addExam.jsp', {
                        method: 'POST',
                        body: new URLSearchParams({
                            'examName': examName,
                            'examCourse': examCourse,
                            'examTeacher': examTeacher,
                            'examDate': `${examDate} 00:00:00`,
                            'examDuration': examDuration,
                            'status': 0 // 初始状态为申请中
                        })
                    })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data);
                            showNotification('操作成功', '考试已成功添加');
                            document.getElementById('add-exam-modal').classList.add('hidden');
                        })
                        .catch(error => {
                            console.error('添加考试失败:', error);
                            showNotification('操作失败', '添加考试过程中出现错误');
                        });

                    e.target.reset();
                }
            );

            // 添加试题模态框
            setupModal(
                'add-question-modal',
                'add-question-btn',
                'close-question-modal',
                'cancel-question-btn',
                'add-question-form',
                function (e) {
                    const examName = document.getElementById("question-course").value;
                    const content = document.getElementById("question-content").value;
                    const optionA = document.getElementById("question-option-a").value;
                    const optionB = document.getElementById("question-option-b").value;
                    const optionC = document.getElementById("question-option-c").value;
                    const optionD = document.getElementById("question-option-d").value;
                    const answer = document.getElementById("question-answer").value;
                    const score = document.getElementById("question-score").value;

                    // 调用后台添加试题接口
                    fetch('addQuestion.jsp', {
                        method: 'POST',
                        body: new URLSearchParams({
                            'exam_name': examName,
                            'question_text': content,
                            'option_a': optionA,
                            'option_b': optionB,
                            'option_c': optionC,
                            'option_d': optionD,
                            'correct_answer': answer,
                            'score': score
                        })
                    })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data);
                            showNotification('操作成功', '试题已成功添加');
                            document.getElementById('add-question-modal').classList.add('hidden');
                        })
                        .catch(error => {
                            console.error('添加试题失败:', error);
                            showNotification('操作失败', '添加试题过程中出现错误');
                        });

                    e.target.reset();
                }
            );

            // 批量导入学生模态框
            setupModal(
                'upload-students-modal',
                'upload-students-btn',
                'close-upload-students-modal',
                'cancel-upload-students-btn',
                'upload-students-form',
                function (e) {
                    const classId = document.getElementById("upload-students-class").value;
                    const fileInput = document.getElementById("file-upload");

                    if (!fileInput.files.length) {
                        alert('请选择要上传的文件');
                        return;
                    }

                    const file = fileInput.files[0];
                    const formData = new FormData();
                    formData.append('class_id', classId);
                    formData.append('file', file);

                    // 调用后台批量导入学生接口
                    fetch('uploadStudents.jsp', {
                        method: 'POST',
                        body: formData
                    })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data);
                            showNotification('操作成功', '学生已成功导入');
                            document.getElementById('upload-students-modal').classList.add('hidden');
                        })
                        .catch(error => {
                            console.error('导入学生失败:', error);
                            showNotification('操作失败', '导入学生过程中出现错误');
                        });

                    e.target.reset();
                }
            );

            // 批量导入试题模态框
            setupModal(
                'upload-questions-modal',
                'upload-questions-btn',
                'close-upload-questions-modal',
                'cancel-upload-questions-btn',
                'upload-questions-form',
                function (e) {
                    const courseId = document.getElementById("upload-questions-course").value;
                    const fileInput = document.getElementById("questions-file-upload");

                    if (!fileInput.files.length) {
                        alert('请选择要上传的文件');
                        return;
                    }

                    const file = fileInput.files[0];
                    const formData = new FormData();
                    formData.append('course_id', courseId);
                    formData.append('file', file);

                    // 调用后台批量导入试题接口
                    fetch('uploadQuestions.jsp', {
                        method: 'POST',
                        body: formData
                    })
                        .then(response => response.text())
                        .then(data => {
                            console.log(data);
                            showNotification('操作成功', '试题已成功导入');
                            document.getElementById('upload-questions-modal').classList.add('hidden');
                        })
                        .catch(error => {
                            console.error('导入试题失败:', error);
                            showNotification('操作失败', '导入试题过程中出现错误');
                        });

                    e.target.reset();
                }
            );

            // 动态加载下拉菜单数据
            loadDropdownData();
        // });

// 动态加载下拉菜单数据
        function loadDropdownData() {
            // 加载教师数据
            fetch('getTeachers.jsp')
                .then(response => response.json())
                .then(teachers => {
                    populateDropdown('class-teacher', teachers, 'id', 'name');
                    populateDropdown('course-teacher', teachers, 'id', 'name');
                    populateDropdown('teaching-teacher', teachers, 'id', 'name');
                    populateDropdown('exam-teacher', teachers, 'id', 'name');
                })
                .catch(error => {
                    console.error('加载教师数据失败:', error);
                });

            // 加载班级数据
            fetch('getClass.jsp')
                .then(response => response.json())
                .then(classes => {
                    populateDropdown('student-class', classes, 'id', 'name');
                    populateDropdown('teaching-class', classes, 'id', 'name');
                    populateDropdown('upload-students-class', classes, 'id', 'name');
                })
                .catch(error => {
                    console.error('加载班级数据失败:', error);
                });

            // 加载课程数据
            fetch('getCourse.jsp')
                .then(response => response.json())
                .then(courses => {
                    populateDropdown('exam-course', courses, 'course_id', 'course_name');
                    //populateDropdown('question-course', courses, 'course_id', 'course_name');
                    populateDropdown('upload-questions-course', courses, 'course_id', 'course_name');
                    populateDropdown('course-teacher', courses, 'course_id', 'course_name'); // 用于课程管理中的教师选择
                })
                .catch(error => {
                    console.error('加载课程数据失败:', error);
                });

            // 加载考试数据
            fetch('getExam.jsp')
                .then(response => response.json())
                .then(exams => {
                    //populateDropdown('exam-course', exams, 'id', 'name');
                     populateDropdown('question-course', exams, 'id', 'name');
                    // populateDropdown('upload-questions-course', exams, 'course_id', 'course_name');
                    // populateDropdown('course-teacher', exams, 'course_id', 'course_name'); // 用于课程管理中的教师选择
                })
                .catch(error => {
                    console.error('加载课程数据失败:', error);
                });
        }

// 工具函数：填充下拉菜单
        function populateDropdown(dropdownId, data, valueField, textField) {
            const dropdown = document.getElementById(dropdownId);
            if (!dropdown) return;

            dropdown.innerHTML = '';
            const defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.textContent = '请选择';
            dropdown.appendChild(defaultOption);

            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item[valueField];
                option.textContent = item[textField];
                dropdown.appendChild(option);
            });
        }


        //通知提示
        function showNotification(title, message, type = 'success') {
            const notification = document.getElementById('notification');
            const icon = document.getElementById('notification-icon');
            const titleElem = document.getElementById('notification-title');
            const messageElem = document.getElementById('notification-message');

            // 清除现有样式
            icon.className = 'flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-full';
            notification.className = 'fixed top-4 right-4 max-w-sm w-full bg-white rounded-lg shadow-lg p-4 transform transition-all duration-300 translate-x-full z-50 flex items-start';

            // 设置类型样式
            switch (type) {
                case 'success':
                    icon.classList.add('bg-green-100', 'text-green-500');
                    notification.classList.add('translate-x-0');
                    break;
                case 'error':
                    icon.classList.add('bg-red-100', 'text-red-500');
                    notification.classList.add('translate-x-0');
                    break;
                case 'warning':
                    icon.classList.add('bg-yellow-100', 'text-yellow-500');
                    notification.classList.add('translate-x-0');
                    break;
            }

            titleElem.textContent = title;
            messageElem.textContent = message;

            // 自动隐藏通知
            setTimeout(() => {
                notification.classList.add('translate-x-full');
            }, 3000);
        }


        // 关闭通知
        document.getElementById('close-notification').addEventListener('click', function () {
            document.getElementById('notification').classList.add('translate-x-full');
        });
    }

    // 模拟数据加载（实际开发中需替换为真实接口调用）
    <%--function loadMockData() {--%>

    <%--    const tableBody = document.getElementById('teacher-list');--%>

    <%--    // 使用Fetch获取所有教师数据--%>
    <%--    fetch("getTeachers.jsp")--%>
    <%--        .then(response => response.json())--%>
    <%--        .then(teachers => {--%>
    <%--            console.log(teachers);--%>
    <%--            // 清空表格--%>
    <%--            tableBody.innerHTML = '';--%>

    <%--            // 渲染教师数据--%>
    <%--            teachers.forEach(teacher => {--%>
    <%--                const row = document.createElement('tr');--%>
    <%--                row.innerHTML = `--%>
    <%--                <td class="px-6 py-3 border-b border-gray-200">${teacher.id}</td>--%>
    <%--                <td class="px-6 py-3 border-b border-gray-200">${teacher.name}</td>--%>
    <%--                <td class="px-6 py-3 border-b border-gray-200">${teacher.gender}</td>--%>
    <%--                <td class="px-6 py-3 border-b border-gray-200">${teacher.email}</td>--%>
    <%--                <td  class="px-6 py-3 border-b border-gray-200">${teacher.status == 'active' ? '已启用' : '已禁用'}--%>
    <%--                <span class="badge ${teacher.status == 'active' ? 'bg-success' : 'bg-warning'}">--%>
    <%--                        ${teacher.status == 'active' ? '已启用' : '已禁用'}--%>
    <%--                </span>--%>
    <%--                </td>--%>
    <%--                        <td class="px-6 py-3 border-b border-gray-200 text-right">--%>
    <%--                    <button class="edit-btn mr-2" title="编辑">--%>
    <%--                        <i class="fa fa-pencil text-primary"></i>--%>
    <%--                    </button>--%>
    <%--                    <button class="delete-btn" title="删除">--%>
    <%--                        <i class="fa fa-trash text-danger"></i>--%>
    <%--                    </button>--%>
    <%--                </td>--%>
    <%--            `;--%>
    <%--                tableBody.appendChild(row);--%>
    <%--            });--%>
    <%--        })--%>
    <%--        .catch(error => {--%>
    <%--            console.error('错误:', error);--%>
    <%--            tableBody.innerHTML = '<tr><td colspan="6" style="color: red;">获取教师数据失败</td></tr>';--%>
    <%--        });--%>
    <%--};--%>
    // 初始化所有列表
    document.addEventListener('DOMContentLoaded', () => {
        initTeacherList();
        initClassList();
        initStudentList();
        initCourseList();
        initExamList();
        initQuestionList();
    });

    // 教师列表初始化
    function initTeacherList() {
        const tableBody = document.getElementById('teacher-list');
        const totalElement = document.getElementById('teacher-total');

        // 使用Fetch获取教师数据
        fetch("getTeachers.jsp")
            .then(response => {
                if (!response.ok) {
                    throw new Error("HTTP错误，状态码：" + response.status);
                }
                return response.json();
            })
            .then(teachers => {
                // 清空表格
                tableBody.innerHTML = '';

                // 渲染教师数据
                if (teachers && teachers.length > 0) {
                    teachers.forEach(teacher => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                        <td class="px-6 py-3 border-b border-gray-200">${teacher.id}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${teacher.name}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${teacher.gender}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${teacher.email}</td>
                        <td class="px-6 py-3 border-b border-gray-200">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${teacher.status == 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                                ${teacher.status == 'active' ? '已启用' : '已禁用'}
                            </span>
                        </td>
                        <td class="px-6 py-3 border-b border-gray-200 text-right">
                            <button class="edit-btn mr-2" title="编辑">
                                <i class="fa fa-pencil text-primary"></i>
                            </button>
                            <button class="delete-btn" title="删除">
                                <i class="fa fa-trash text-danger"></i>
                            </button>
                        </td>
                    `;
                        tableBody.appendChild(row);
                    });

                    // 设置总数
                    totalElement.textContent = teachers.length;
                } else {
                    tableBody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">没有找到教师数据</td></tr>';
                    totalElement.textContent = '0';
                }
            })
            .catch(error => {
                console.error('获取教师数据失败:', error);
                tableBody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-red-500">获取教师数据失败</td></tr>';
            });
    }

    // 班级列表初始化
    function initClassList() {
        const tableBody = document.getElementById('class-list');
        const totalElement = document.getElementById('class-total');

        // 使用Fetch获取班级数据
        fetch("getClass.jsp")
            .then(response => response.json())
            .then(classes => {
                tableBody.innerHTML = '';

                if (classes && classes.length > 0) {
                    classes.forEach(cls => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                        <td class="px-6 py-3 border-b border-gray-200">${cls.id}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${cls.name}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${cls.headTeacher}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${cls.studentCount}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${cls.createTime}</td>
                        <td class="px-6 py-3 border-b border-gray-200 text-right">
                            <button class="edit-btn mr-2" title="编辑">
                                <i class="fa fa-pencil text-primary"></i>
                            </button>
                            <button class="delete-btn" title="删除">
                                <i class="fa fa-trash text-danger"></i>
                            </button>
                        </td>
                    `;
                        tableBody.appendChild(row);
                    });

                    totalElement.textContent = classes.length;
                } else {
                    tableBody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">没有找到班级数据</td></tr>';
                    totalElement.textContent = '0';
                }
            })
            .catch(error => {
                console.error('获取班级数据失败:', error);
                tableBody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-red-500">获取班级数据失败</td></tr>';
            });
    }

    // 学生列表初始化
    function initStudentList() {
        const tableBody = document.getElementById('student-list');
        const totalElement = document.getElementById('student-total');

        // 使用Fetch获取学生数据
        fetch("getStudents.jsp")
            .then(response => response.json())
            .then(students => {
                tableBody.innerHTML = '';

                if (students && students.length > 0) {
                    students.forEach(student => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                        <td class="px-6 py-3 border-b border-gray-200">${student.id}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${student.name}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${student.gender}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${student.className}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${student.email}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${student.createTime}</td>
                        <td class="px-6 py-3 border-b border-gray-200 text-right">
                            <button class="edit-btn mr-2" title="编辑">
                                <i class="fa fa-pencil text-primary"></i>
                            </button>
                            <button class="delete-btn" title="删除">
                                <i class="fa fa-trash text-danger"></i>
                            </button>
                        </td>
                    `;
                        tableBody.appendChild(row);
                    });

                    totalElement.textContent = students.length;
                } else {
                    tableBody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">没有找到学生数据</td></tr>';
                    totalElement.textContent = '0';
                }
            })
            .catch(error => {
                console.error('获取学生数据失败:', error);
                tableBody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-red-500">获取学生数据失败</td></tr>';
            });
    }

    // 课程列表初始化
    function initCourseList() {
        const tableBody = document.getElementById('course-list');
        const totalElement = document.getElementById('course-total');

        // 使用Fetch获取课程数据
        fetch("getCourse.jsp")
            .then(response => response.json())
            .then(courses => {
                tableBody.innerHTML = '';

                if (courses && courses.length > 0) {
                    courses.forEach(course => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                        <td class="px-6 py-3 border-b border-gray-200">${course.course_id}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${course.course_name}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${course.description}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${course.course_teacher}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${course.create_time}</td>
                        <td class="px-6 py-3 border-b border-gray-200 text-right">
                            <button class="edit-btn mr-2" title="编辑">
                                <i class="fa fa-pencil text-primary"></i>
                            </button>
                            <button class="delete-btn" title="删除">
                                <i class="fa fa-trash text-danger"></i>
                            </button>
                        </td>
                    `;
                        tableBody.appendChild(row);
                    });

                    totalElement.textContent = courses.length;
                } else {
                    tableBody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">没有找到课程数据</td></tr>';
                    totalElement.textContent = '0';
                }
            })
            .catch(error => {
                console.error('获取课程数据失败:', error);
                tableBody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-red-500">获取课程数据失败</td></tr>';
            });
    }

    // 考试列表初始化
    function initExamList() {
        const tableBody = document.getElementById('exam-list');
        const courseFilter = document.getElementById('exam-course-filter');
        const statusFilter = document.getElementById('exam-status-filter');

        // 使用Fetch获取考试数据
        fetch("getExam.jsp")
            .then(response => response.json())
            .then(exams => {
                tableBody.innerHTML = '';

                if (exams && exams.length > 0) {
                    exams.forEach(exam => {
                        const statusClass = exam.status === 'active' ? 'bg-green-100 text-green-800' :
                            exam.status === 'completed' ? 'bg-blue-100 text-blue-800' :
                                exam.status === 'approved' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800';
                        const statusText = exam.status === 'active' ? '进行中' :
                            exam.status === 'completed' ? '已完成' :
                                exam.status === 'approved' ? '已批准' : '待批准';

                        const row = document.createElement('tr');
                        row.innerHTML = `
                        <td class="px-6 py-3 border-b border-gray-200">${exam.id}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${exam.name}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${exam.course}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${exam.teacher}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${exam.createTime}</td>
                        <td class="px-6 py-3 border-b border-gray-200">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">
                                ${statusText}
                            </span>
                        </td>
                        <td class="px-6 py-3 border-b border-gray-200 text-right">
                            <button class="view-btn mr-2" title="查看">
                                <i class="fa fa-eye text-info"></i>
                            </button>
                            <button class="edit-btn mr-2" title="编辑">
                                <i class="fa fa-pencil text-primary"></i>
                            </button>
                            <button class="delete-btn" title="删除">
                                <i class="fa fa-trash text-danger"></i>
                            </button>
                        </td>
                    `;
                        tableBody.appendChild(row);
                    });
                } else {
                    tableBody.innerHTML = '<tr><td colspan="7" class="px-6 py-4 text-center text-gray-500">没有找到考试数据</td></tr>';
                }
            })
            .catch(error => {
                console.error('获取考试数据失败:', error);
                tableBody.innerHTML = '<tr><td colspan="7" class="px-6 py-4 text-center text-red-500">获取考试数据失败</td></tr>';
            });

        // 考试筛选下拉框初始化（实际项目中应从服务器获取课程列表）
        fetch("getCourse.jsp")
            .then(response => response.json())
            .then(courses => {
                // 添加"所有课程"选项
                courseFilter.innerHTML = '<option value="all">所有课程</option>';

                // 添加课程选项
                if (courses && courses.length > 0) {
                    courses.forEach(course => {
                        const option = document.createElement('option');
                        option.value = course.course_id;
                        option.textContent = course.course_name;
                        courseFilter.appendChild(option);
                    });
                }
            })
            .catch(error => {
                console.error('获取课程数据失败:', error);
            });
    }

    // 试题列表初始化
    function initQuestionList() {
        const tableBody = document.getElementById('question-list');
        const courseFilter = document.getElementById('question-course-filter');

        // 使用Fetch获取试题数据
        fetch("getQuestion.jsp")
            .then(response => response.json())
            .then(questions => {
                tableBody.innerHTML = '';

                if (questions && questions.length > 0) {
                    questions.forEach(question => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                        <td class="px-6 py-3 border-b border-gray-200">${question.id}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${question.course}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${question.description}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${question.score}</td>
                        <td class="px-6 py-3 border-b border-gray-200">${question.createTime}</td>
                        <td class="px-6 py-3 border-b border-gray-200 text-right">
                            <button class="edit-btn mr-2" title="编辑">
                                <i class="fa fa-pencil text-primary"></i>
                            </button>
                            <button class="delete-btn" title="删除">
                                <i class="fa fa-trash text-danger"></i>
                            </button>
                        </td>
                    `;
                        tableBody.appendChild(row);
                    });
                } else {
                    tableBody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">没有找到试题数据</td></tr>';
                }
            })
            .catch(error => {
                console.error('获取试题数据失败:', error);
                tableBody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-red-500">获取试题数据失败</td></tr>';
            });

        // 试题筛选下拉框初始化
        fetch("getCourse.jsp")
            .then(response => response.json())
            .then(courses => {
                // 添加"所有课程"选项
                courseFilter.innerHTML = '<option value="all">所有课程</option>';

                // 添加课程选项
                if (courses && courses.length > 0) {
                    courses.forEach(course => {
                        const option = document.createElement('option');
                        option.value = course.course_id;
                        option.textContent = course.course_name;
                        courseFilter.appendChild(option);
                    });
                }
            })
            .catch(error => {
                console.error('获取课程数据失败:', error);
            });
    }
    // 日期格式化函数
    function formatDate(timestamp) {
        if (!timestamp) return '';
        const date = new Date(timestamp);
        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
    }


    // 模拟班级、学生、课程等数据类似，此处省略...


</script>
</body>
</html>